<template>
  <div class="home">
    <div class="banner wrap">
      <img src="http://sc.wolfcode.cn/assets/integralMall/img/index/banner.png" alt="" />
    </div>
    <div class="content">
      <div class="wrap">
        <Title title1="精品推荐" :imgSrc="titImg1"></Title>
        <List :arr="jingpinArr"></List>
        <Title title1="热门兑换" :imgSrc="titImg2"></Title>
        <img style="margin: 10px 0 30px 0" src="http://sc.wolfcode.cn/assets/integralMall/img/users/banner.png" />
        <List :arr="HotArr"></List>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '../components/Title.vue'
import List from '../components/List.vue'
import { JinpinAPI,HotAPI } from '@/request/api'

export default {
  name: "HomeView",
  data() {
    return {
      titImg1:"http://sc.wolfcode.cn/assets/integralMall/img/index/Recommend.png",
      titImg2:"http://sc.wolfcode.cn/assets/integralMall/img/index/hot.png",
      jingpinArr:[],
      HotArr:[]
    }
  },
  async created() {
    let jpres = await JinpinAPI();
    this.jingpinArr =jpres.data.data.records;
    let hotres = await HotAPI();
    this.HotArr =hotres.data.data.records;
  },
  components: { Title,List }
};
</script>

<style lang="less" scoped>
.banner {
  padding-bottom: 30px;
}

.content {
  background-color: #f5f5f5;
  padding-bottom: 30px;
}

.jifen {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;

  li {
    width: 285px;
    height: 168px;
    color: #fff;
    padding: 20px 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-size 0.4s linear;
    background-size: 100% 100%;

    &:hover {
      background-size: 105% 105%;
    }

    h3 {
      font-size: 24px;
      margin-bottom: 19px;
    }

    div {
      width: 96px;
      height: 27px;
      border: 1px solid #ffffff;
      text-align: center;
      line-height: 27px;
    }
  }
}
</style>
  
  
  